<template>
  <el-dialog title="流程历史" :visible.sync="dialog" :modal="true" :modal-append-to-body="false">
    <div style="height:400px;overflow:auto;">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="工单详情" name="1">
          <el-row>
            <el-col :span="12">
              <span class="fl" style="width:22%">工单类型：</span>
              <span class="fl" style="width:72%" v-text="datarow.type"></span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:22%">客户名称：</span>
              <span class="fl" style="width:72%" v-text="datarow.name">我的客服名字</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:22%">客户电话：</span>
              <span class="fl" style="width:72%">15680529067</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:22%">客户地址：</span>
              <span class="fl" style="width:72%">四川省成都市高新区天府三街大源国际中心二期二栋2401</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:22%">工单备注：</span>
              <span class="fl" style="width:72%">这是备注杀对方水电费</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:22%">组织机构：</span>
              <span class="fl" style="width:72%">尊古科技演示</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:22%">区域地址：</span>
              <span class="fl" style="width:72%">大源国际二期二栋</span>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="关联的设备" name="2">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[1, 2, 3]"
            :default-checked-keys="[]"
            :props="defaultProps"
          ></el-tree>
        </el-collapse-item>
        <el-collapse-item title="流程过程" name="3">
          <el-timeline>
            <el-timeline-item timestamp="2018/4/2" placement="top">
              <h4 class="bold">启动安装流程</h4>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/3" placement="top">
              <h4 class="bold">安装接单</h4>
              <p>耗时：5分钟49秒 执行人：demo4</p>
              <p>备注：同意</p>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/2" placement="top">
              <h4 class="bold">上门安装</h4>
              <p>耗时：1分钟38秒 执行人：demo4</p>
              <p>
                <img src="@/assets/biao.png" alt>
              </p>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/2" placement="top">
              <h4 class="bold">安装审核</h4>
            </el-timeline-item>
          </el-timeline>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    datarow: {
      type: Object,
      default: null
    }
  },
  name: "detail",
  data() {
    return {
      activeNames: ["1", "2", "3"],
      dialog: false,
      loading: false,
      data: [
        {
          id: 1,
          label: "网关1",
          disabled: true,
          children: [
            {
              id: 4,
              label: "设备 1-1",
              disabled: true
            }
          ]
        },
        {
          id: 2,
          label: "网关 2",
          disabled: true,
          children: [
            {
              id: 5,
              disabled: true,
              label: "设备 2-1"
            },
            {
              id: 6,
              disabled: true,
              label: "设备 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "网关 3",
          disabled: true,
          children: [
            {
              id: 7,
              disabled: true,
              label: "设备 3-1"
            },
            {
              id: 8,
              disabled: true,
              label: "设备 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

<style lang="scss">
</style>
